<template>
  <div class="tabHeader">
      <ul>
          <li v-for="(item ,index) in tabs" :key="index"
          :class="{active: index === activeIndex}"
          @click="changeIndex(index)">{{item}}</li>
      </ul>
  </div>
</template>

<script>
export default {
 props: ['tabs'],
 data () {
     return {
         activeIndex: 0
     }
 },
 methods: {
     changeIndex (index) {
         this.activeIndex = index
         this.$emit('changeIndex', this.activeIndex)
     }
 }
}
</script>

<style scoped>
.tabHeader {
    width: 100%;
}
.tabHeader ul {
    display: flex;
    width: 100%;
}
.tabHeader ul li {
    list-style: none;
    flex: 1
}
.active {
    color: red;
}
</style>